<template>
  <div v-loading="loading">
    <el-form ref="formRef" :model="form">
      <pub-edit-description :ndColumns="2">
        <pub-edit-description-item :span="2" label="项目名称">
          {{ detailInfo.projectName }}
        </pub-edit-description-item>
        <pub-edit-description-item :span="1" label="事项分类" v-if="showSxfl">
          {{ formatDictCode(props.itemType, detailInfo.itemType) }}
        </pub-edit-description-item>
        <pub-edit-description-item :span="1" label="申报单位">
          {{ detailInfo.orgName }}
        </pub-edit-description-item>
        <pub-edit-description-item :span="1" label="申报人">
          {{ detailInfo.applyPerson }}
        </pub-edit-description-item>
        <pub-edit-description-item :span="1" label="申报人联系方式">
          {{ detailInfo.applyPhone }}
        </pub-edit-description-item>
        <pub-edit-description-item
          :span="1"
          label=""
          v-if="!showSxfl"
        ></pub-edit-description-item>
        <pub-edit-description-item :span="2" label="审批结果" required>
          <!-- <template #labelExtra>
            <el-tooltip content="驳回后，当前事项退回至发起人" placement="top">
              <el-icon size="20" color="red" class="ml-5px"><Warning /></el-icon>
            </el-tooltip>
          </template> -->
          <el-form-item prop="approveResult" :rules="$formRules.select">
            <pub-radio-dict
              v-model="form.approveResult"
              dict-code="SPJG"
              type="String"
            />
          </el-form-item>
        </pub-edit-description-item>
        <pub-edit-description-item :span="1" label="审批人" required>
          <el-form-item prop="approveUserName" :rules="$formRules.input">
            <pub-input v-model="form.approveUserName" />
          </el-form-item>
        </pub-edit-description-item>
        <pub-edit-description-item :span="1" label="审批时间" required>
          <el-form-item prop="approveTime" :rules="$formRules.input">
            <el-date-picker
              v-model="form.approveTime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
              type="datetime"
              :disabled="true"
              placeholder="请选择"
            />
          </el-form-item>
        </pub-edit-description-item>
        <pub-edit-description-item :span="2" label="审批意见" required>
          <el-form-item prop="approveComment" :rules="$formRules.input">
            <pub-textarea v-model="form.approveComment"></pub-textarea>
            <div class="tags">
              <el-tag v-for="item in tags" @click="checkTag(item)">
                {{ item.quickName }}
              </el-tag>
            </div>
          </el-form-item>
        </pub-edit-description-item>
        <pub-edit-description-item :span="2" label="附件材料">
          <el-form-item prop="approveFile">
            <uploadNew
              @uploading="onUploading"
              :bizType="bizType"
              v-model:fileIds="form.approveFile"
            ></uploadNew>
          </el-form-item>
        </pub-edit-description-item>
      </pub-edit-description>
    </el-form>
    <div class="dialog-footer-btn">
      <el-button type="default" @click="emit('close', false)">取消</el-button>
      <el-button
        v-prevent-repeat-click
        type="primary"
        @click="submitForm(formRef)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { formatDictCode } from '@/utils/index.js'
import { ref, reactive, onBeforeMount } from 'vue'
import { approve_submit, get_approve_default } from '@/api/api.js'
import dayjs from 'dayjs'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'
const emit = defineEmits(['close', 'uploading'])
const props = defineProps({
  detailInfo: {
    type: Object
  },
  bizType: String,
  itemType: {
    type: String,
    default: 'ZCPZ-SXFL'
  },
  showSxfl: {
    type: Boolean,
    default: true
  }
})
const loading = ref(false)
const formRef = ref(null)
const form = ref({
  approveComment: ''
})
const tags = ref([])

const submitForm = formEl => {
  formEl.validate(async valid => {
    if (valid) {
      loading.value = true
      form.value.subsetId = props.detailInfo.subsetId
      form.value.processInstanceId = props.detailInfo.processInstanceId
      let url
      let type
      if (form.value.approveResult == '6') {
        url = `/assetSupervision/noApprove`
        type = 'put'
      } else {
        url = `/assetSupervision/approve`
        type = 'post'
      }
      let res = await approve_submit(url, type, form.value)
      if (res.succeed) {
        ElMessage.success(res.msg)
        emit('close', true)
      }
      loading.value = false
    }
  })
}

const checkTag = val => {
  if (
    form.value.approveComment &&
    form.value.approveComment.split('，').findIndex(i => i == '') == -1
  ) {
    form.value.approveComment =
      form.value.approveComment +
      (form.value.approveComment ? '，' : '') +
      val.quickName
  } else {
    form.value.approveComment += val.quickName
  }
}

const getDefaultApproveRemark = async () => {
  let params = {
    pageSize: 10000,
    pageNum: 1,
    relateCode: '1'
  }
  let res = await get_approve_default(params)
  if (res.succeed) {
    tags.value = res.data
  }
}

const onUploading = val => {
  loading.value = val
}

onBeforeMount(() => {
  getDefaultApproveRemark()
  form.value.approveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
})
</script>
<style scoped>
.el-loading-parent--relative {
  position: inherit !important;
}
.tags {
  .el-tag {
    user-select: none;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
